<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>history页面</h1>
    
    <div>
        <button id="back_btn">返回上2页</button>
        <a href="001.html">1</a>
        <a href="002.html">2</a>
        <a href="003.html">3</a>
        <button id="forward_btn">返回下一页</button>

        <button id="baidu_btn">跳转页面</button>
        <button id="baidu_btn1">点击刷新页面</button>
        <button id="baidu_btn2">点击生成新的页面</button>
    </div>
    <input type="text">

    <script>
        //获取按钮
        let back_btn = document.getElementById('back_btn');
        let forward_btn = document.getElementById('forward_btn');
        //给按钮绑定单击响应函数
        back_btn.addEventListener('click',()=>{
            // alert('1')
            history.back //返回上一页
            history.go(-2); //去指定页面，负值为返回，正值为向前跳
        })
        forward_btn.addEventListener('click',()=>{
            history.forward();
            //location
            //如果将location的值改为一个绝对路径或是相对路径，页面会跳转
        })

        // 跳转
        let baidu_btn = document.getElementById('baidu_btn');      
        baidu_btn.onclick = function(){
            //跳转到指定页面
            //1.直接修改location的值
            // location = 'http://www.baidu.com';  
            //将网址传入assign方法中
            location.assign('https://www.baidu.com');

        }

        //刷新
        let baidu_btn1 = document.getElementById('baidu_btn1');
        baidu_btn1.onclick = function(){          
            //reload() 刷新 传入true，则强制清空缓存刷新整个页面
            location.reload(true);
        }

        let baidu_btn2 = document.getElementById('baidu_btn2');
        baidu_btn2.onclick = function(){          
            //replace()
            // 生成一个新的页面替换当前页面，不会生成历史记录
            location.replace('http://ww.baidu.com')
            
        }

    </script>
</body>
</html>